<template>
  <van-nav-bar
    title="我的"
    left-arrow
    left-text="返回"
    click-left="onClickLeft"
  >
    <template #right>
      <van-cell is-link @click="show = true" />
      <van-action-sheet
        v-model:show="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        duration="0"
        select
        safe-area-inset-bottom
      />
    </template>
  </van-nav-bar>
  <div class="my-box">
    <div class="my-hand">
      <div class="head-image">
        <img class="head-portrait" src="/01.jpg" alt="" />
      </div>
      <div>
        {{ userTel }}
      </div>
    </div>
    <p>我的订单</p>
    <van-grid :column-num="5">
      <van-grid-item icon="chat-o" text="全部订单" />
      <van-grid-item icon="todo-list-o" text="待付款" />
      <van-grid-item icon="shop-o" text="待发货" />
      <van-grid-item icon="records" text="待收货" />
      <van-grid-item icon="comment-o" text="待评价" />
    </van-grid>
    <p>工具包</p>
    <van-grid :column-num="5">
      <van-grid-item icon="location-o" text="收货地址" />
      <van-grid-item icon="balance-list-o" text="领券中心" />
      <van-grid-item icon="chat-o" text="我的快递" />
      <van-grid-item icon="records" text="官方客服" />
      <van-grid-item icon="service-o" text="我的评价" />
    </van-grid>
  </div>

  <MyFooter></MyFooter>
</template>

<script>
import { showToast } from "vant";
import { showConfirmDialog } from "vant";
import { getUserDataApi } from "@/api/my.js";
export default {
  data() {
    return {
      show: false,
      actions: [],
      users: [],
      userTel: "",
    };
  },
  methods: {
    setRight() {
      this.actions = [
        {
          name: "退出登录",
          overlay:false,
          callback: () => {
            showConfirmDialog({
              title: "退出",
              message: "是否退出登录",
              overlay:false,
            })
              .then(() => {
                if (sessionStorage.getItem("token")) {
                  sessionStorage.clear();
                  showToast("退出成功");
                  this.$router.push("/");
                } else {
                  showToast("退出失败");
                }
              })
              .catch(() => {
                // on cancel
              });
          },
        },
        {
          name: "取消",
        },
      ];
    },
    async getUserData() {
      let res = await getUserDataApi({
        userid: sessionStorage.getItem("userid"),
      });
      if (res.data.code === "200") {
        // console.log(res.data.data);
        // this.users = res.data.data;
        this.userTel = res.data.data[0].tel;
      }
    },
  },
  created() {
    this.setRight();
    this.getUserData();
  },
};
</script>

<style scoped>
.my-box {
  width: 97%;
  height: 450px;
  background-color: #eee;
  border-radius: 15px;
  margin: 0 auto;
  padding: 10px;
}
.my-hand {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.head-image {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  /* background-color: aqua; */
}
.head-portrait {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

</style>
